<template>
	<view>
		<view class="cal status_bar"></view>
		<search-box class="cal"></search-box>
		<tab-top class="cal" :tabIndex="tabIndex" :tabArr="['我的收藏', '收听历史']" @changeTabIndex="changeTabIndex"></tab-top>
		<swiper :style="{height: `${calHeight}rpx`}" :current="tabIndex" @change="swiperChangeIndex">
			<!-- 我的收藏 -->
			<swiper-item>
				<scroll-view scroll-y :style="{height: `${calHeight}rpx`}">
					<!-- 最好的方案是绑定id(特别是涉及到增加和删除数据的时候) -->
					<block v-for="item in collectedArr" :key="item.id">
						<collect-item :bookId="item.id" :bookImgUrl="item.imgurl" :bookName="item.name"
							:bookSynopsis="item.synopsis" @getId="getId" @showCancalCol="showCancalCol"></collect-item>
					</block>
				</scroll-view>
			</swiper-item>
			<!-- 收听历史 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="{height: `${calHeight}rpx`}">
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 取消收藏界面 -->
		<!-- ref只适用于引入的组件 -->
		<uni-popup type="bottom" ref="popup" @change="changeStatus">
			<view class="bg-white">
				<view class="flex align-center" style="height: 100rpx;line-height: 100rpx;" @tap="cancalCollect">
					<myIcon iconId="icon-xingxing" iconColor='text-danger' class="px-3"></myIcon>
					<text class="font">取消收藏</text>
				</view>
				<view class="bg-hover-light" style="height: 15rpx;"></view>
				<view class="text-center" style="height: 110rpx;line-height: 110rpx;" @tap="showCancalCol(false)">取消
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import unit from '@/common/unit'
	import searchBox from '@/components/searchBox.vue'
	import tabTop from '@/components/tabTop.vue';
	import collectItem from '@/components/collectItem.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				calHeight: 0,
				tabIndex: 0,
				showCancalColStatus: false,
				collectedArr: [],
				cancalColId: 0
			}
		},
		components: {
			searchBox,
			tabTop,
			collectItem,
			uniPopup
		},
		watch: {
			showCancalColStatus(newVal) {
				if (newVal) {
					uni.hideTabBar({
						animation: true
					})
				} else {
					uni.showTabBar({
						animation: true
					})
				}
			}
		},
		methods: {
			// 切换tab栏
			changeTabIndex(index) {
				this.tabIndex = index
			},
			swiperChangeIndex(e) {
				this.tabIndex = e.detail.current
			},
			// 模拟请求
			initDate() {
				this.collectedArr = getApp().globalData.collectedBooks
			},
			// 获取取消收藏的id
			getId(id) {
				this.cancalColId = id
			},
			// 根据id找index
			IdToIndex(id) {
				return this.collectedArr.findIndex(item => item.id === id)
			},
			// 取消收藏
			cancalCollect() {
				let index = this.IdToIndex(this.cancalColId)
				this.collectedArr.splice(index, 1)
				this.showCancalCol(false)
			},
			// 取消弹框状态管理
			showCancalCol(Bol) {
				Bol ? this.$refs.popup.open() : this.$refs.popup.close()
			},
			changeStatus(e) {
				this.showCancalColStatus = e.show
			}
		},
		onLoad() {
			this.initDate()
		},
		mounted() {
			unit.calSurplusHeight({
				pageId: this,
				pos: 'cal',
				isTabBarPage: true,
				success: val => this.calHeight = val
			})
		}
	}
</script>

<style>

</style>
